<template>
  <div class="Tabfooter">
      <div class="Tabfooter_item" v-for="(item,index) in items" :key="index" @click="gotourl(index)">
          <div><img :src="itemindex===index?item.icon_active:item.icon" alt="" width="42%"></div>
          <div :class="itemindex===index?'tab_item_active':'tab_item'">{{item.title}}</div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        tabItems:Array
    },
    data() {
        return {
            items:this.tabItems,
            itemindex:0
        }
    },
    methods: {
        gotourl(index){
            this.itemindex = index
            var qwe = this.tabItems[index]
            this.$router.push(qwe.path)
        }
    },
}
</script>
<style scoped>
    .Tabfooter{
        width: 100%;
        height: 64px;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        background: white;
    }
    .Tabfooter_item{
        width: 25%;
        height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tab_item{
        color: gray;
        font-size: 0.25rem;
    }
    .tab_item_active{
        color: red;
         font-size: 0.25rem;
    }
</style>